<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 需要引入Vue.js库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        /* 添加active类的样式，使边框效果可见 */
        .active {
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <h3 v-bind:title="title">切换图片边框</h3>
            <!-- 修正v-bind:class的绑定 -->
            <img v-bind:src="img" width="100" height="100" :class="{active: isActive}">
        </div>
        <p :style="{color: textColor, fontSize: fontSize + 'px'}">This is a paragraph.</p>
        <!-- 修正按钮的点击事件绑定语法 -->
        <button @click="toggleActive">切换</button>
    </div>
    <script>
        // 修正变量名和Vue实例创建语法
        const app = Vue.createApp({
            data() {
                return {
                    title: "切换图片边框",
                    img: "./logo.png",  // 确保该路径下有图片文件
                    textColor: "red",
                    fontSize: "16",
                    isActive: false,
                }
            },
            methods: {
                toggleActive() {
                    this.isActive = !this.isActive;  // 修正空格问题
                }
            }
        }).mount("#app");
    </script>
</body>
</html>